<template>
  <section class="section-padding bg-white contact-section">
    <div class="container-custom">
      <div class="text-center flex justify-start">
        <h2 class="text-2xl text-white md:text-3xl font-bold ">联系我们</h2>
      </div>
      <p class="text-white my-10 px-14">感谢您对集团的关注！如果您有任何问题或意见，请通过以下方式和我们联络：</p>
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 px-8">
        <!-- 左：总部信息 -->
        <div class="p-6">
          <h3 class="text-base font-semibold text-white mb-3">总部：XXX市XXX区XXX路X号XXX</h3>
          <p class="text-white leading-6 mb-3">电话：020-000000</p>
          <p class="text-white leading-6 mb-3">邮政编码：000000</p>
          <div class="flex flex-col  items-start">
            <img src="~/assets/images/qrcode.jpg" alt="扫码关注" class="w-20 h-20"/>
            <p class="text-white mt-2 sm:text-xs md:text-sm lg:text-base">扫码关注</p>
          </div>

        </div>

        <!-- 中：投诉建议 -->
        <!-- <div class="p-6 flex flex-col  items-center">
          <img src="~/assets/images/qrcode.jpg" alt="扫码关注" class="w-20 h-20"/>
          <p class="text-white mt-2 sm:text-lg md:text-xl lg:text-2xl">扫码关注</p>
        </div> -->

        <!-- 右：快速导航 -->
        <!-- <div class="border rounded-xl p-6">
          <h3 class="text-xl font-semibold text-gray-900 mb-4">快速导航</h3>
          <div class="grid grid-cols-2 gap-4 text-gray-700">
            <a href="#about" class="hover:text-primary-600">关于我们</a>
            <a href="#cases" class="hover:text-primary-600">服务案例</a>
            <a href="#contact" class="hover:text-primary-600">联系我们</a>
            <a href="#services" class="hover:text-primary-600">广告服务</a>
          </div>
        </div> -->
      </div>

      <!-- 底部公司条 -->
      <!-- <div class="mt-10 grid grid-cols-1 md:grid-cols-3 gap-6 text-gray-700">
        <div>总部：XXX市XXX区XXX路X号XXX大厦</div>
        <div>电话：020-000000</div>
        <div>扫码关注</div>
      </div> -->
    </div>
  </section>
</template>

<script setup>
// 静态信息布局以对齐参考站
</script>

<style scoped lang="scss">
.contact-section {
  width: 100%;
  height: 100%;
  background: url('~/assets/images/contact_bg.jpg') no-repeat center center;
  background-size: 100% 100%;
}
</style>
